<template>
  <div class="map-placeholder"></div>

  <div class="map-wrap">
    <div class="map-over-wrap">
      <el-amap
        :center="mapOptions.center"
        :zoom="mapOptions.zoom"
        :zooms="mapOptions.zooms"
        mapStyle="amap://styles/darkblue"
        :rotateEnable="false"
        :keyboardEnable="false"
      >
        <el-amap-info-window
          ref="infoRef"
          :visible="infolVisible"
          :position="currInfo.position"
          isCustom
        >
          <div class="map-modal-wrap">
            <div class="map-modal-title">
              <img src="@/assets/bigscreen3/icon-dibiao.png" alt="" />
              <p>
                <span>{{ currInfo.projectName }}</span>
              </p>
            </div>
            <div class="map-modal-content">
              <div class="map-modal-content-item">
                <div class="map-money">
                  <span>{{ currInfo.mro }}</span>
                  <i>元</i>
                </div>
                <p>直采交易累计金额</p>
              </div>
              <div class="map-modal-content-item">
                <div class="map-money">
                  <span>{{ currInfo.mall }}</span>
                  <i>元</i>
                </div>
                <p>大宗交易累计金额</p>
              </div>
            </div>
          </div>
        </el-amap-info-window>

        <el-amap-marker
          v-for="(item, idx) in labelData"
          :position="item.position"
          :icon="makerIc"
          @mouseover="handleMouseover(item)"
          @mouseout="handleMouseout"
          :key="`map-marker-${idx}`"
        />

        <el-amap-layer-district
          type="Country"
          :zIndex="2"
          :depth="2"
          :opacity="1"
          :styles="{
            fill: '#0f274e',
            'province-stroke': '#1d7fc2',
            'nation-stroke': '#24abfe',
            'city-stroke': '#122f5f',
            'stroke-width': 1.5,
          }"
        />

        <el-amap-layer-district
          type="Country"
          :SOC="'CHN'"
          :zIndex="1"
          :depth="1"
          :opacity="1"
          :styles="{
            fill: '#0f274e',
            'province-stroke': '#1d7fc2',
            'nation-stroke': '#24abfe',
            'city-stroke': '#15366d',
            'stroke-width': 4,
          }"
        />
      </el-amap>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ajax } from "@/store/service";

const mapOptions = ref({
  zooms: [3, 22],
  center: [108, 20],
  zoom: 4.6,
});

const makerIc = ref(require("@/assets/bigscreen3/icon_pp_lg.png"));

const labelData = ref([]);
const getMapData = async () => {
  const res = await ajax.getProjectMapData();
  labelData.value = res.map((l, i) => {
    const position = l.coordinate.split(",");
    return { ...l, position };
  });
};

const currInfo = ref({});
const infolVisible = ref(false);
const handleMouseover = (item) => {
  currInfo.value = item;
  infolVisible.value = true;
};

const handleMouseout = (e) => {
  infolVisible.value = false;
};

onMounted(() => {
  getMapData();
});
</script>

<style lang='scss'>
.map-placeholder {
  height: vh(412+118);
  margin-bottom: vh(20);
  z-index: -1;
}

.map-wrap {
  overflow: hidden;
  position: fixed;
  height: vh(1080);
  width: vw(1920);
  left: 0;
  top: 0;
  z-index: 0;

  .map-over-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: -21px;
  }

  .map-modal-wrap {
    height: vh(170);
    width: vh(424);
    background: #0e1953;
    box-shadow: inset 0px 0px 23px 0px #06a4da;

    .map-modal-title {
      height: vh(60);
      width: vh(414);
      margin: vh(5);
      position: relative;
      top: vh(5);
      box-shadow: inset 0px 0px 33px 0px rgba(50, 197, 255, 0.63);
      white-space: nowrap;

      & > img {
        display: inline-block;
        vertical-align: middle;
        height: vh(19);
        width: vh(14);
        margin: vh(21) vh(15) vh(20) vh(17);
      }
      & > p {
        display: inline-block;
        vertical-align: middle;
        white-space: normal;
        color: #ffffff;
        font-size: vh(16);
        line-height: vh(20);
        width: vh(345);

        & > span {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
    .map-modal-content {
      white-space: nowrap;
      text-align: center;

      .map-modal-content-item {
        display: inline-block;
        vertical-align: middle;
        width: 49.5%;
        height: vh(58);
        border-right: solid 1px rgba(243, 243, 243, 0.15);
        margin-top: vh(20);
        padding-top: vh(8);

        .map-money {
          font-weight: bold;
          font-size: vh(22);
          line-height: 1em;
          color: #ffffff;
          vertical-align: bottom;
          letter-spacing: -0.7px;

          i {
            font-size: vh(16);
            font-style: normal;
            font-weight: normal;
            margin-left: vh(4);
            margin-top: -vh(4);
          }
        }
        & > p {
          font-size: vh(14);
          color: #ffffff;
          margin-top: vh(4);
        }
      }
    }
  }
}
</style>